<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>盒子模型</title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: #5F9EA0;
				/*padding 内边距*/
				padding:10px;
				/*border 边框*/
				border: 10px solid red;
				/*border-top: 5px solid blue;*/
				/*margin 外边距*/
				margin: 10px;
				
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color:#DEB887;
			}
			
		</style>
	</head>
	<body>
	<!--盒子模型的实际的宽度：width+2*（padding+border+margin）-->
	<!--盒子模型的实际的高度：height+2*（padding+border+margin）-->
		<div id="box1">
			内容
		</div>
		<div id="box2">
			内容
		</div>
	</body>
</html>
